<template>
  <div class="compare-table">
    <VirtualTable :headerCellStyle="headerCellStyle" rowKey="index" :table="tableData">
      <Cell label="RFQ">
        <Cell label="DP报价" prop="left.dpPrice"></Cell>
        <Cell label="GCM Function" prop="left.gcmFunction"></Cell>
        <Cell label="GCM负责人" prop="left.gcmOwner">
          <template slot-scope="scope">
            {{ scope.row.left ? gcmOwnerById(scope.row.left.gcmOwner) : '' }}
          </template>
        </Cell>
        <Cell label="工艺描述" prop="left.idProcess"></Cell>
        <Cell label="材质描述" prop="left.materialDetail"></Cell>
        <Cell label="负责人" prop="left.owner"></Cell>
        <Cell label="物料描述" prop="left.partName"></Cell>
        <Cell label="正式物料编码" prop="left.partNumber"></Cell>
        <Cell label="数量" prop="left.qty"></Cell>
        <Cell label="重量" prop="left.weight"></Cell>
        <Cell label="尺寸规格" prop="left.size"></Cell>
        <Cell label="RD Function" prop="left.rdFunction"></Cell>
        <Cell label="Tracking & Option" prop="left.trackingOption"></Cell>
      </Cell>

      <Cell label="FD">
        <Cell label="GCM估价" prop="right.gcmCost"></Cell>
        <Cell label="GCM负责人" prop="right.gcmOwner">
          <template slot-scope="scope">
            {{ scope.row.right ? gcmOwnerById(scope.row.right.gcmOwner) : '' }}
          </template>
        </Cell>
        <Cell label="工艺描述" prop="right.newIdProcess"></Cell>
        <Cell label="物料名称" prop="right.newPartName"></Cell>
        <Cell label="物料编码" prop="right.newPartNo"></Cell>
        <Cell label="数量" prop="right.newQty"></Cell>
        <Cell label="尺寸规格" prop="right.newSize"></Cell>
        <Cell label="RD Function" prop="right.rdFunction"></Cell>
        <Cell label="Tracking & Option" prop="right.trackingOption"></Cell>
      </Cell>
    </VirtualTable>
  </div>
</template>

<script>
import Cell from '@/widgets/VirtualTable/Cell'
import VirtualTable from '@/widgets/VirtualTable/Table'
export default {
  name: 'RfqCompareTable',
  components: { VirtualTable, Cell },
  props: {
    tableData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {}
  },
  computed: {
    gcmOwnerById() {
      return gcmOwner => {
        // console.log(gcmOwner)
        if (gcmOwner && gcmOwner.length) {
          const newVal = []
          for (const val of gcmOwner) {
            newVal.push(this.$store.getters['user/getUserNameById'](val))
          }
          return newVal.join('|')
        } else {
          return ''
        }
      }
    }
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    headerCellStyle({ col, depth, td }) {
      if ((td.prop && td.prop.indexOf('left.') !== -1) || (col === 1 && depth === 1)) {
        return {
          backgroundColor: '#ffd966',
          color: ' #333333'
        }
      } else if ((td.prop && td.prop.indexOf('right.') !== -1) || (col === 2 && depth === 1)) {
        return {
          backgroundColor: '#2f75b5',
          color: '#ffffff'
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.compare-table {
  height: 74%;
  overflow-y: auto;
}
</style>
